<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <template>
        <!-- 关键字输入框开始 -->
        <div class="block">
          <el-input
            style="width: 140px"
            placeholder="请输入关键字"
            v-model="content"
            clearable
            width="100px"
            size="small"
          >
          </el-input>
        </div>
        <!-- 编号输入框结束 -->

        <!-- 订单编号输入框开始 -->
        <div class="block">
          <el-input
            style="width: 140px"
            placeholder="请输入订单编号"
            v-model="orderId"
            clearable
            width="100px"
            size="small"
          >
          </el-input>
        </div>
        <!-- 编号输入框结束 -->

        <!-- 状态选择开始 -->
        <div class="block">
          <el-select
            v-model="commentStatus"
            clearable
            placeholder="请选择"
            size="small"
          >
            <el-option value="未审核" label="未审核"></el-option>
            <el-option value="通过" label="通过"></el-option>
            <el-option value="不通过" label="不通过"></el-option>
          </el-select>
        </div>
        <!-- 状态选择结束 -->

        <!-- 查询按钮开始 -->
        <el-button type="success" size="small" @click="toQuery">查询</el-button>
        <!-- 查询按钮结束 -->
      </template>
    </div>
    <!-- 头部 -->

    <!-- table表格 -->
    <el-table :data="tableData" style="width: 100%" size="mini">
      <!-- 序号 -->
      <el-table-column type="index" label="序号" width="50px" align="center">
      </el-table-column>

      <!-- 评论内容 -->
      <el-table-column prop="content" label="评论内容" align="center">
      </el-table-column>

      <!-- 顾客编号 -->
      <el-table-column prop="customerId" label="顾客编号" align="center">
      </el-table-column>

      <!-- 订单编号 -->
      <el-table-column
        prop="orderId"
        label="订单编号"
        align="center"
      ></el-table-column>

      <!-- 评论时间 -->
      <el-table-column prop="commentTime" label="评论时间" align="center">
        <template slot-scope="scope">
          {{ parseTime(scope.row.commentTime) }}
        </template>
      </el-table-column>

      <!-- 审核状态 -->
      <el-table-column label="评论状态" align="center" width="80px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '通过'" type="success">{{
            scope.row.status
          }}</el-tag>
          <el-tag v-else-if="scope.row.status == '不通过'" type="danger">{{
            scope.row.status
          }}</el-tag>
          <el-tag v-else-if="scope.row.status == '未审核'" type="info">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="toPass(scope.row.id)"
            v-if="scope.row.status != '通过'"
            >通过</el-button
          >
          <el-button
            type="text"
            size="mini"
            style="color: red"
            v-if="scope.row.status != '不通过'"
            @click="toNoPass(scope.row.id)"
            >不通过</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- table表格 -->
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { parseTime } from "../../utils/index.js";
import { post } from "../../utils/request";

export default {
  data() {
    return {
      // 传参页码数和页数
      list: {
        page: 1,
        pageSize: 10,
      },
      // 查询页数和页码
      list: {
        page: 1,
        pageSize: 10,
      },
      input: "",
      // 状态-模糊搜索
      commentStatus: "",
      // 订单id-模糊搜索
      orderId: "",
      // 内容-模糊搜索
      content: "",
    };
  },
  computed: {
    ...mapState("orderComment", ["tableData"]),
  },
  methods: {
    // 使用辅助函数
    ...mapActions("orderComment", ["findAllOrderComment"]),
    // 点击设置通过审核
    toPass(id) {
      post("/orderComment/checkPass", { id }).then((res) => {
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.findAllOrderComment(this.list);
        }
      });
    },
    // 点击设置不通过审核
    toNoPass(id) {
      post("/orderComment/checkNoPass", { id }).then((res) => {
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.findAllOrderComment(this.list);
        }
      });
    },

    // 查询按钮事件
    toQuery() {
      let data = {
        content: this.content,
        status: this.commentStatus,
        orderId: this.orderId,
      };
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key];
        }
      }
      let newList = {
        page: 1,
        pageSize: 10,
      };
      // 将获取三个属性的data赋值给list参数去查询
      this.list = { ...newList, ...data };
      // 将页数强制回到第一页
      this.currentPage = 1;
      // 调用查询方法
      this.findAllOrderComment(this.list);

      //！！有个bug模糊查询后，删除搜索条件后再搜索，依旧是发送前一次搜索的参数，页面无法刷新
    },

    // 调用过滤解析时间戳
    parseTime,
  },
  created() {
    this.findAllOrderComment(this.list);
  },
  mounted() {},
};
</script>
<style scoped lang='scss'>
.header {
  display: flex;
  .block {
    margin-right: 10px;
  }
  margin-bottom: 25px;
}
</style>